<template>
  <v-app>
    <v-app-bar
      app
      color="success"
      dark
    >
      <div class="d-flex align-center">
        <v-img
          alt="Vuetify Logo"
          class="shrink mr-2"
          contain
          src="https://cdn.vuetifyjs.com/images/logos/vuetify-logo-dark.png"
          transition="scale-transition"
          width="40"
        />

        <span>
          信息可视化大作业
        </span>
      </div>

      <v-spacer></v-spacer>

      <v-btn
        href="https://github.com/vuetifyjs/vuetify/releases/latest"
        target="_blank"
        text
      >
        <span class="mr-2">Info</span>
        <v-icon>mdi-open-in-new</v-icon>
      </v-btn>
    </v-app-bar>

    <v-main>
      <v-container>
        <v-row>
          <infobar :data='InfobarData' />
        </v-row>
        <v-row >
          <v-col cols="9">
            <v-row>
              <v-card class="ma-2"
              tile
              outlined
              >
              <MainChart :colormap="colormap" :config='graphconfig' 
              @recv='recv'/>
              </v-card>
            </v-row>
              <el-slider v-model="graphconfig.value1" :max="maxday" :format-tooltip="formatTooltip"></el-slider>
          </v-col>
          <v-col cols="3">
            <v-card class="pa-2">
              <panel :colormap='colormap' :formOptions='formOptions'/>
            </v-card>
          </v-col>
        </v-row>
      </v-container>
    </v-main>
  </v-app>
</template>

<script>
import MainChart from './components/MainChart';
import panel from './components/panel';
import Infobar from './components/infobar';

export default {
  name: 'App',

  components: {
    MainChart,
    panel,
    Infobar,
  },

  data: () => ({
    value1:0,
    select:null,
    maxday:142,
    items:[
          'Programming',
          'Design',
          'Vue',
          'Vuetify',
        ],
    colormap:{
      "中国":'#BCA2A2', "法国":'#E0B09F', "美国":'#CAD9B0', "印度":'#B0C4D9', "马达加斯加": '#C6B0D9', "俄罗斯" : '#F2DEAA'
      },
    InfobarData:{
      total_infect:10,
      total_death:10,
      new_infect:10,
      new_death:10
    },
    formOptions:{
      'axis':{
        'x':{name:'x轴',type:'enum',default:'新增确诊',values:['累计确诊','累计死亡','新增确诊','新增死亡']},
        'y':{name:'y轴',type:'enum',default:'新增死亡',values:['累计确诊','累计死亡','新增确诊','新增死亡']},
        'rx':{name:'rx轴',type:'enum',default:'累计确诊',values:['累计确诊','累计死亡','新增确诊','新增死亡']},
        'ry':{name:'ry轴',type:'enum',default:'累计死亡',values:['累计确诊','累计死亡','新增确诊','新增死亡']},
        
      },
      'color':{
        "中国":{name:"中国",type:'color',default:'#BCA2A2'}, 
        "法国":{name:"法国",type:'color',default:'#E0B09F'}, 
        "美国":{name:"美国",type:'color',default:'#CAD9B0'},
        "印度":{name:"印度",type:'color',default:'#B0C4D9'}, 
        "马达加斯加":{name:"马达加斯加",type:'color',default:'#C6B0D9'}, 
        "俄罗斯" : {name:"俄罗斯",type:'color',default:'#F2DEAA'}
      },
      'other':{
        "tooltip":{name:'显示提示信息',type:'bool',default:true},
        "tag":{name:'显示标签',type:'bool',default:true},
        "times":{name:'缩放',type:'enum',default:1,values:[0.5,1,1.5]},
        "countrys":{name:'国家数量',type:'number',default:15,values:[10,30]},
        "axis":{name:'坐标轴数据处理',type:'enum',default:'linear',values:['linear','log2']}
      }
    },
    graphconfig:{
      x:'新增确诊',//x轴意义会变化，你应当监视它并依据它来更新图，下面三项同理
      y:'新增死亡',
      rx:'累计确诊',
      ry:'累计死亡',
      colormap:{
        "中国":'#BCA2A2', "法国":'#E0B09F', "美国":'#CAD9B0', "印度":'#B0C4D9', "马达加斯加": '#C6B0D9', "俄罗斯" : '#F2DEAA'
      },
      value1:0,
      times:1,//缩放倍数,对每个椭圆进行缩放
      axis:'log2',//只有两种可能'linear' 和 'log2'
      tooltip:true,//显示提示信息
      tag:true//显示标签
    }
  }),
  methods:{
    recv(data){
      this.InfobarData.total_infect=data["累计确诊"];
      this.InfobarData.total_death=data["累计死亡"];
      this.InfobarData.new_infect=data["新增确诊"];
      this.InfobarData.new_death=data["新增死亡"]
    },
    updateColormap(){
      Object.keys(this.formOptions.color).forEach((it)=>{
        this.graphconfig.colormap[it]=this.formOptions.color[it].default;
        });
    },
    updateAxis(){
      Object.keys(this.formOptions.axis).forEach((it)=>{this.graphconfig[it]=this.formOptions.axis[it].default});
    },
    updateOther(){
      Object.keys(this.formOptions.other).forEach((it)=>{this.graphconfig[it]=this.formOptions.other[it].default});
    },
    formatTooltip(val){
      const tmp=[29,31,30,31,30,31];
      var mon=2;
      var i=0;
      for(i=0;i<6;i++){
        if(val>tmp[i]){
          val-=tmp[i];
          mon+=1;
        }
        else{
          break;
        }
      }
      return "2020-"+String(mon)+"-"+String(val);
    }
  },
  watch:{
    formOptions:{
      handler(){
        this.updateColormap();
        this.updateAxis();
        this.updateOther();
        console.log(this.graphconfig);
      },
      deep:true
    },
    'graphconfig.value1':{
      handler(){
      }
    },
    value1(){
    }
  },
  created(){
  }
};
</script>
